<!DOCTYPE html>
<html>
<head>
    <title>颜色猜测游戏</title>
    <style>
        body {
            background: #232323;
            color: white;
        }
        .square {
            width: 30%;
            background: purple;
            padding-bottom: 30%;
            float: left;
            margin: 1.66%;
            border-radius: 15%;
            transition: background 0.5s;
            cursor: pointer;
        }
        #container {
            max-width: 600px;
            margin: 0 auto;
        }
        #colorDisplay {
            font-size: 200%;
        }
        #score {
            font-size: 200%;
        }
    </style>
</head>
<body>
    <h1>猜猜看 <span id="colorDisplay">RGB</span> 是哪个颜色</h1>
    <h2>分数: <span id="score">0</span></h2>

    <div id="container"></div>

    <script>
        var score = 0;
        var difficulty = 1;
        var colorsPerRow = 3;

        function randomColor() {
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return "rgb(" + r + ", " + g + ", " + b + ")";
        }

        function generateColorArray(num) {
            var arr = [];
            for(var i = 0; i < num; i++) {
                arr.push(randomColor());
            }
            return arr;
        }

        function pickColor(colors) {
            var random = Math.floor(Math.random() * colors.length);
            return colors[random];
        }

        function setupGame(colors, pickedColor) {
            var container = document.getElementById('container');
            container.innerHTML = '';
            document.getElementById('colorDisplay').textContent = pickedColor;

            for(var i = 0; i < colors.length; i++) {
                var square = document.createElement('div');
                square.className = "square";
                square.style.backgroundColor = colors[i];
                square.addEventListener("click", function() {
                    var clickedColor = this.style.backgroundColor;
                    if(clickedColor === pickedColor) {
                        score++;
                    } else {
                        score--;
                    }
                    document.getElementById('score').textContent = score;
                    startGame();
                });
                container.appendChild(square);
            }
        }

        function startGame() {
            difficulty = Math.max(1, Math.floor(score / 10) + 1);
            var colors = generateColorArray(difficulty * colorsPerRow);
            var pickedColor = pickColor(colors);
            setupGame(colors, pickedColor);
        }

        startGame();
    </script>
</body>
</html>
